<template>
  <div class="flex">
    <div v-if="!scope.row.isCheck" class="button-text" @click="toCheck(scope.row)">查看</div>
    <div v-else class="button-text disabled">查看</div>
    <el-dropdown v-if="moreBtnShow">
      <div class="el-dropdown-link leftBorder">
        <div class="button-text">更多<i class="el-icon-arrow-down"/></div>
      </div>
      <el-dropdown-menu slot="dropdown" class="dropdown-wrap">
        <el-dropdown-item v-if="showApproverChangeBtn(scope.row.examineStatus) && !isComplete" @click.native="handleApproverChange(scope.row.id)">
          <div>转交</div>
        </el-dropdown-item>
        <el-dropdown-item v-if="scope.row.examineStatus === 4 && !isComplete && !scope.row.paymentStatus && hasRouteAuth('medium:supplierAudit:pay')" @click.native="toPay(scope.row)">
          <div>付款</div>
        </el-dropdown-item>
        <el-dropdown-item v-if="process !== 4 && scope.row.examineStatus === 4 && hasRouteAuth('medium:supplierAudit:higherRecall')" @click.native="examineBack(scope.row)">
          <div>撤回</div>
        </el-dropdown-item>
        <el-dropdown-item v-if="(scope.row.examineStatus === 3 || scope.row.examineStatus === 4) && !isComplete && !isExamineing && isCreator" @click.native="againLaunch(scope.row)">
          <div>申请余款</div>
        </el-dropdown-item>
        <el-dropdown-item v-if="(scope.row.examineStatus === 2 || scope.row.examineStatus === 5) && !isComplete && !isExamineing && isExamineCreator(scope.row)" @click.native="toEdit(scope.row)">
          <div>编辑</div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <template v-else>
      <div v-if="showApproverChangeBtn(scope.row.examineStatus) && !isComplete" class="button-text leftBorder" @click="handleApproverChange(scope.row.id)">转交</div>
      <div v-if="scope.row.examineStatus === 4 && !isComplete && !scope.row.paymentStatus && hasRouteAuth('medium:supplierAudit:pay')" class="button-text leftBorder" @click="toPay(scope.row)">付款</div>
      <div v-if="process !== 4 && scope.row.examineStatus === 4 && hasRouteAuth('medium:supplierAudit:higherRecall')" class="button-text leftBorder" @click="examineBack(scope.row)">撤回</div>
      <div v-if="(scope.row.examineStatus === 3 || scope.row.examineStatus === 4) && !isComplete && !isExamineing && isCreator" class="button-text leftBorder" @click="againLaunch(scope.row)">申请余款</div>
      <div v-if="(scope.row.examineStatus === 2 || scope.row.examineStatus === 5) && !isComplete && !isExamineing && isExamineCreator(scope.row)" class="button-text leftBorder" @click="toEdit(scope.row)">编辑</div>
    </template>
  </div>
  <!-- 以下按钮除了一些特定的情况会展示之外，如果出现符合展示逻辑 但是列表中出现审批中的情况那么也不允许展示 -->
  <!-- 未过审or已撤回才进行展示 -->
  <!-- <el-button v-if="scope.row.examineStatus !== -1 && hasRouteAuth('crm:contract:approverChange')" type="text" size="small" class="action-btn" @click="handleApproverChange(scope.row.id)">转交</el-button> -->
  <!-- 已完成且未付款 -->
  <!-- <el-button v-if="scope.row.examineStatus === 4 && !isComplete && !scope.row.paymentStatus && hasRouteAuth('medium:supplierAudit:pay')" type="text" size="small" class="action-btn" @click="toPay(scope.row)">付款</el-button> -->
  <!-- 整个结算单是已完成是不能撤回 -->
  <!-- <div v-if="process !== 4 && scope.row.examineStatus === 4 && hasRouteAuth('medium:supplierAudit:higherRecall')" class="button-text" style="color: #F56C6C" @click="examineBack(scope.row)">撤回</div> -->
  <!-- 已完成或者已作废 -->
  <!-- <el-button v-if="(scope.row.examineStatus === 3 || scope.row.examineStatus === 4) && !isComplete && !isExamineing && isCreator" type="text" size="small" class="action-btn" @click="againLaunch(scope.row)">复制</el-button> -->
  <!-- 未过审or已撤回才进行展示 -->
  <!-- <el-button v-if="(scope.row.examineStatus === 2 || scope.row.examineStatus === 5) && !isComplete && !isExamineing && isCreator" type="text" size="small" class="action-btn" @click="toEdit(scope.row)">编辑</el-button> -->
</template>

<script>
import { mapState } from 'vuex';
import { hasRouteAuth } from '@/utils/permission';
export default {
  props: {
    scope: {
      type: Object,
      default: () => ({})
    },
    moreBtnShow: {
      type: Boolean,
      default: false
    },
    isComplete: {
      type: Boolean,
      default: false
    },
    process: {
      type: Number,
      default: null
    },
    isExamineing: {
      type: Boolean,
      default: false
    },
    isCreator: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    })
  },
  methods: {
    hasRouteAuth,
    toCheck(row) {
      this.$emit('toCheck', row);
    },
    showApproverChangeBtn(status) {
    // -1: 草稿中
    // 0: '待审批',
    // 1: '审批中',
    // 2: '未过审',
    // 4: '已完成',
    // 3: '已作废',
    // 5: '已撤回'
      return status !== -1 && status !== 4;
    },
    handleApproverChange(id) {
      this.$emit('handleApproverChange', id);
    },
    toPay(row) {
      this.$emit('toPay', row);
    },
    examineBack(row) {
      this.$emit('examineBack', row);
    },
    againLaunch(row) {
      this.$emit('againLaunch', row);
    },
    isExamineCreator(item) {
      return this.userInfo.id === item.creatorId;
    },
    toEdit(row) {
      this.$emit('toEdit', row);
    }
  }
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}

.el-dropdown-link {
  display: block;
  position: relative;
}
.leftBorder {
  position: relative;
  padding-left:6px;
  margin-left: 6px;
  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -7px;
    width: 1px;
    background: #ddd;
    height: 14px;
  }
}
.action-btn {
  margin: 0;
  padding: 0;
}
</style>
